import React from 'react';
import styles from './index.less';
import { Modal } from 'antd';
import * as echarts from 'echarts/lib/echarts';

import TBasePage from '#/base/TBasePage';
import { CloseOutlined } from '#/utils/antdIcons';
import TRNotification from '#/utils/notification';
import preview_icon from '@/assets/img/preview_icon.png';
import { TRTooltip } from '@/components';
import { NumberFormat } from '@/utils';

let MyChart = null;

class PopupSettleComponent extends TBasePage {
  static defaultProps = {
    data: {},
  };
  constructor(props) {
    super(props);
    this.state = {
      visible: true,
    };
  }

  componentDidMount() {
    const { data } = this.props;
    let xData = data && data.map((item) => item.xAxis + '月');
    let yData = data && data.map((item) => NumberFormat(item.value, 2));
    this.setState(
      {
        visible: true,
      },
      () => {
        let eachart = document.querySelector('.mychart');
        MyChart = echarts.init(eachart);
        setTimeout(() => {
          //初始化默认显示tooltip
          this.autoToolTip();
        }, 300);

        let option = {
          grid: {
            x: '0', //相当于距离左边效果:padding-left
            y: '10%', //相当于距离上边效果:padding-top
            right: '3%',
            bottom: '3%',
            containLabel: true,
          },
          tooltip: {
            trigger: 'axis',
            extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)',
            backgroundColor: 'rgba(255, 255, 255, 1)',
            textStyle: { color: '#888E95', borderWidth: 1, borderColor: '#1A253C4B', padding: 12 },
            axisPointer: {
              type: 'cross',
              label: { backgroundColor: '#F5F8FA', color: '#888E95', shadowBlur: 0 },
            },
            formatter: this._onToopFormatter.bind(this),
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#D1D9E9',
              },
            },
            data: xData,
            axisLabel: {
              interval: 0,
              color: '#888E95',
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              margin: 25, //刻度标签与轴线之间的距离
              color: '#888E95',
            },
            axisLine: {
              //y轴
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                height: '1px',
                color: '#EDF0F6',
              },
            },
          },
          series: [
            {
              type: 'line',
              data: yData,
              markPoint: {},
              symbol: 'circle',
              symbolSize: 0.1,
              itemStyle: {
                normal: {
                  label: { show: true, fontSize: 10 }, //折线上的字
                  color: '#ED5945',
                  lineStyle: {
                    color: '#ED5945',
                    width: 1,
                  },
                },
              },
            },
          ],
        };
        MyChart.setOption(option, true);
      },
    );
  }
  autoToolTip = () => {
    try {
      MyChart &&
        MyChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0, // 显示第几个series
          dataIndex: 0, // 显示多少月份
        });
    } catch (e) {
      //
    }
  };

  _onToopFormatter = (params) => {
    const { year } = this.props;
    // let year=moment(startDate).format('YYYY')
    const fist = params[0];
    let array = [];
    let timer = `${year}年${fist.dataIndex + 1}月`;
    array.push({ name: '偏差考核费用', value: `${fist.value}万元` });
    this.__tooltip_ && this.__tooltip_.show(timer, array);
  };
  _onCancel = () => {
    const { onPress } = this.props;
    this.setState(
      {
        visible: false,
      },
      () => {
        onPress({ index: 0 });
      },
    );
  };
  _onOk = () => {
    const { onPress } = this.props;
    this.setState(
      {
        visible: false,
      },
      () => {
        onPress({ index: 1 });
      },
    );
  };

  render() {
    return (
      <Modal
        width={830}
        centered
        closable={false}
        footer={null}
        maskClosable={false}
        visible={this.state.visible}
        onCancel={this._onCancel.bind(this)}
        className="modals"
      >
        <div className={styles.DeviationBox}>
          <div className={styles.title}>
            <div className={styles.texts}>
              <span>
                <img src={preview_icon} alt="" />
              </span>
              <span>偏差考核费用</span>
            </div>
            <div
              className={styles.clone}
              onClick={() => {
                this._onCancel();
              }}
            >
              <CloseOutlined />
            </div>
          </div>
          <div className={styles.cont}>
            <div className={styles.tootip}>
              <TRTooltip ref={(e) => (this.__tooltip_ = e)} suffixText="" />
            </div>
            <div className="mychart" style={{ height: '400px' }} />
          </div>
        </div>
      </Modal>
    );
  }
}

class PopupSettleModal {
  __key__ = '';
  show = (data, startDate, year) => {
    return new Promise((resolve) => {
      if (this.__key__ !== '') {
        return;
      }
      this.__key__ = String(Date.now());
      TRNotification.add({
        key: this.__key__,
        content: (
          <PopupSettleComponent
            data={data}
            startDate={startDate}
            year={year}
            onPress={(obj) => {
              TRNotification.remove(this.__key__);
              this.__key__ = '';
              resolve(obj);
            }}
          />
        ),
        duration: null,
      });
    });
  };
  dismiss = () => {
    if (this.__key__.length > 0) {
      TRNotification.remove(this.__key__);
      this.__key__ = '';
    }
  };
}

const popupSettleModal = new PopupSettleModal();
export default popupSettleModal;
